<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button size="mini" @click="addPersonControl">新增布控</el-button>
    </div>
    <el-row>
      <el-col
        v-for="(o, index) in personControlList"
        :key="o.id"
        :span="6"
        :offset="index > 0 ? 1 : 0"
      >
        <el-card class="card-container" :class="{ 'card-selected': selectedResidenceIndex === index }"
        >
          <div class="card-content" style="width: 100%;height: 100%;" @click="selectPersonControl(index)">
            <h2>{{o.name}}</h2>
            <div class="image-wrapper">
              <span>布防人：{{o.createdUserName}}</span><br>
              <span>布防状态：{{o.statusStr}}</span><br>
              <span>有效期限：{{o.startTime}}-{{o.endTime}}</span><br>
              <span>布控对象：{{o.objectStr}}</span><br>
              <span>创建时间：{{o.createTime}}</span><br>
            </div>
            <div class="info-wrapper">

            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getPersonControlList } from '@/api/warning/control/person'

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      personControlList: [],
      // 表格树数据
      deptList: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      selectedResidenceIndex: 0,
      personControlReq: {
        createTime:'',
        pageNum: 1,
        pageSize: 9,
      },
      total: 0,
    }
  },
  methods: {
    getPersonControlList() {
      getPersonControlList(this.personControlReq).then(response => {
        this.personControlList = response.data.list
        this.total = response.data.total
      })
    },
    selectPersonControl(index) {
      this.selectedResidenceIndex = index; // 更新选中的卡片索引
    },
    addPersonControl(){

    }
  },
  created() {
    this.getPersonControlList()
  },
}

</script>

<style scoped>

</style>
